React = require('react')
Card = require('antd-mobile/lib/card')
Flex = require('antd-mobile/lib/flex')
Icon = require('antd-mobile/lib/icon')
Toast = require('antd-mobile/lib/toast')
RefreshControl = require('antd-mobile/lib/refresh-control')
{View,Image,Text,ScrollView,TouchableHighlight,StyleSheet,Navigator,ListView,TouchableOpacity} = require('react-native')
Dimensions = require('Dimensions')
{ width, height } = Dimensions.get('window')
{View} = require('react-native')
{fetchGetList,fetchRefreshList} = require('../actions/page_dqdm.js')
{connect} = require('react-redux')
_ = require('underscore')
moment = require('moment')

backImg = require('../img/back.png')
searchIcon = require('../img/search_white.png')

basePage = require('../mixins/basePage.js')

Page_Dqdm = React.createClass

  mixins:[basePage]

  _renderHeader:->
      <View style={{flexDirection:'row',flex:0,height:60,alignItems:'center', justifyContent:'center',backgroundColor:'#0066FF'}}>
        <View style={{flex:1,padding:10}}>
          <TouchableOpacity onPress={=>@props.navigator.pop()}>
            <Image source={backImg}  style={{height:30,width:30,resizeMode:'contain'}}/>
          </TouchableOpacity>
        </View>
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
          <Text style={{fontSize:20,color:'#ffffff'}}>大桥代码</Text>
        </View>
        <View style={{flex:1,alignItems:'flex-end',padding:10}}>
          <TouchableOpacity onPress={@_showActionSheet}>
          </TouchableOpacity>
        </View>
      </View>

  _renderRow:(rowData,sectionID,rowID,highlightRow)->
      debugger
      bColor = if rowID%2 isnt 0 then "#f9f9f9" else "#ffffff"
      <View key={rowData.CHROUTCODE} style={{flexDirection:'row',padding:20, backgroundColor:bColor,justifyContent:'center',alignItems:'center'}}>
        <View style={{flex:2}}>
          <Text>{rowData.VCBRIDGENAME}</Text>
        </View>
        <View style={{flex:1}}>
          <Text>{rowData.NMMAXHIGH}</Text>
        </View>
        <View style={{flex:1}}>
          <Text>{rowData.NMAPPHIGH}</Text>
        </View>
      </View>
  _renderListColumns:->
    <View style={{ flexDirection:'row',backgroundColor:'#f9f9f9',padding:20,justifyContent:'center',alignItems:'center'}}>
      <View style={{flex:2}}>
        <Text style={{fontWeight:'bold'}}>桥名称</Text>
      </View>
      <View style={{flex:1}}>
        <Text style={{fontWeight:'bold'}}>最大高度</Text>
      </View>
      <View style={{flex:1}}>
        <Text style={{fontWeight:'bold'}}>应用高度</Text>
      </View>
    </View>
  # render:->
  #   dataSource = @ds.cloneWithRows(@props.list)
  #   <View style={width:width,height:height,flexDirection:'column',backgroundColor:'#ffffff'}>
  #     <View style={{flexDirection:'row',flex:0,height:60,alignItems:'center', justifyContent:'center',backgroundColor:'#0066FF'}}>
  #       <View style={{flex:1,padding:10}}>
  #         <TouchableOpacity onPress={=>@props.navigator.jumpBack()}>
  #           <Image source={backImg}  style={{height:30,width:30,resizeMode:'contain'}}/>
  #         </TouchableOpacity>
  #       </View>
  #       <View style={{flex:3,justifyContent:'center',alignItems:'center'}}>
  #         <Text style={{fontSize:20,color:'#ffffff'}}>大桥代码</Text>
  #       </View>
  #       <View style={{flex:1,alignItems:'flex-end',padding:10}}>
  #       </View>
  #     </View>
  #     <View style={{flexDirection:'row',backgroundColor:'#ffffff',padding:20,justifyContent:'center',alignItems:'center'}}>
  #       <View style={{flex:2}}>
  #         <Text>桥名称</Text>
  #       </View>
  #       <View style={{flex:1}}>
  #         <Text>最大高度</Text>
  #       </View>
  #       <View style={{flex:1}}>
  #         <Text>应用高度</Text>
  #       </View>
  #     </View>
  #     <View  style={{height:1,backgroundColor:'#CCCCCC'}}/>
  #     <ListView dataSource={dataSource} style={{flex:1}}
  #           enableEmptySections={true}
  #           renderRow={@_renderRow}
  #           renderSeparator={this._renderSeparator}
  #           renderFooter={@_renderFooter}
  #           initiaListSize:20
  #           pageSize={20}
  #           scrollEventThrottle={20}
  #           refreshControl={
  #             <RefreshControl refreshing={@props.refreshing} onRefresh={@refreshList}
  #                 distanceToRefresh={60}
  #                 resistance={2.5}
  #                 hammerOptions={{
  #                   touchAction:'auto'
  #                   recognizers:
  #                     pan:
  #                       threshold:10
  #                   }}/>
  #           }>
  #     </ListView>
  #   </View>

styles = StyleSheet.create
  row:
    flexDirection:'column'
    justifyContent:'center'
    padding:10
    backgroundColor:'#F6F6F6'
  text:
    flex:1

mapStateToProps = (state)->
  debugger
  list:state.page_dqdm.list
  isLoading:state.page_dqdm.isLoading
  pageIndex:state.page_dqdm.pageIndex
  completed:state.page_dqdm.completed
  refreshing:state.page_dqdm.refreshing
  lastFetchTime:state.page_dqdm.lastFetchTime
  connected:state.appState.connected
mapDispatchToProps = (dispatch,wonProps)->
  fetchGet:(pageNum)->
    dispatch fetchGetList(pageNum)
  fetchRefresh:->
    dispatch fetchRefreshList()

module.exports = connect(mapStateToProps,mapDispatchToProps)(Page_Dqdm)
